<template>
	<view class="container">
		
		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/medical_bg.png') +')'}">
			<view class="info">
					 <view class="c-base name">医疗服务</view>
					 <view class="font-24 c-base">专业医疗团队全天候守护，多维健康服务贴心相伴！</view>
			</view>
		</view>
		<u-navbar
		     :title="title"
		     @rightClick="rightClick"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#ffffff"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		 </u-navbar>
		 
		 
		 <view class="health rel fill-base radius-20 m-24">
		 	<view class="healthItem" @click="goTo('/otherpages/medical/check')">
				 <image class="img" :src="$util.img('image/medical_1.png')" mode="aspectFill" />
				 <text class="font-30 font-weight-6">健康体检</text>
				 <text class="font-24 c-78">体检保护健康</text>
		 	</view>
			<view class="healthItem" @click="goTo('/otherpages/medical/expertDoctor')">
				 <image class="img" :src="$util.img('image/medical_2.png')" mode="aspectFill" />
				 <text class="font-30  font-weight-6">医生坐诊</text>
				 <text class="font-24 c-78">名医守护健康</text>
			</view>
			<view class="healthItem" @click="getDoctorCategory()">
				 <image class="img" :src="$util.img('image/medical_3.png')" mode="aspectFill" />
				 <text class="font-30  font-weight-6">家庭医生</text>
				 <text class="font-24 c-78">全程呵护健康</text>
			</view>
		 </view>
		 
		 <view class="module rel">
			<view class="item" v-for="(item,index) in goodsCategory" :key="index" @click="goGoodsList(item)">
		 		 <image class="img" :src="$util.img(item.image)" mode="aspectFill" lazy-load/>
				 <view>{{item.category_name}}</view>
				 <view class="flex-between">
					 <text class="font-24 c-78">{{item.description}}</text>
					 <image class="right" :src="$util.img('image/right_yuan.png')" mode="aspectFill"/>
				 </view>
		 	</view>
		 	<view class="item" v-for="(item,index) in list" :key="index" @click="goTo('/otherpages/medical/description?id='+item.article_id)">
		 		 <image class="img" :src="$util.img(item.icon)" mode="aspectFill" lazy-load/>
				 <view>{{item.title}}</view>
				 <view class="flex-between">
					 <text class="font-24 c-78">{{item.describe}}</text>
					 <image class="right" :src="$util.img('image/right_yuan.png')" mode="aspectFill"/>
				 </view>
		 	</view>
		 </view>
		 <!-- 登录 -->
		 <login-pop ref="loginDialog"></login-pop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				list:[],
				goodsCategory: []

			}
		},
		onLoad(data) {
			if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
			this.getIndex()
			this.getGoodsCategory()
		},
		methods: {
			goGoodsList(item) {
				this.$util.redirectTo('/otherpages/medical/list?category_id='+item.category_id+'&category_name='+item.category_name)
			},
			goTo(url) {
				this.$util.redirectTo(url)
			},
			getIndex() {
				this.$api.sendRequest({
			      url: "/api/health/article",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						this.list = res.data;
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
			getGoodsCategory() {
				this.$api.sendRequest({
			      url: "/api/health/categorylists",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						this.goodsCategory = res.data;
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
			getDoctorCategory() {
				this.$api.sendRequest({
				  url: "/api/health/doctor",
				  data: {},
				  success: res => {
				    if(res.code == 0) {
						let category_id = res.data.category_id;
						let category_name = res.data.category_name;
						this.$util.redirectTo('/otherpages/medical/list?category_id='+category_id+'&category_name='+category_name)
				    }else {
						this.$util.showToast(res.message);
					}
				  }
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	width: 750rpx;
	height: 526rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
	.info {
		text-align: center;
		padding: 100rpx 97rpx;
		.name {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
		}
	}
}

.health {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	margin-top: -300rpx;
	.healthItem {
		width: 33.3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			width: 98rpx;
			height: 98rpx;
		}
	}
}
.module {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 24rpx;
	.item {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		width: 339rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		.img {
			width: 86rpx;
			height: 86rpx;
			margin-bottom: 4rpx;
		}
		.right {
			width: 32rpx;
			height: 32rpx;
		}
	}
}
</style>
